<template>
    <div class="ep-picker" :style="resultShow ? '-webkit-transform: translateY(0%);' : ''">
        <div class="ep-title ep-border-bottom">
            <span class="ep-cancel" @click="cancel">取消</span>
            <span class="ep-confirm" @click="confirm">完成</span>
        </div>
        <div class="ep-linkage">
            <div class="ep-pickerWrapper">
                <mt-picker ref="province" :slots="provinces" @change="onProvinceChange" value-key="name"></mt-picker>
            </div>
            <div class="ep-pickerWrapper">
                <mt-picker :slots="citys" @change="onCityChange" value-key="name"></mt-picker>
            </div>
            <div class="ep-pickerWrapper">
                <mt-picker :slots="areas" @change="onAreaChange" value-key="name"></mt-picker>
            </div>
        </div>
    </div>
</template>

<script>
var mask = document.createElement('div');
export default {
    name: 'Picker',
    props: {
        data: {
            type: Array,
            default: []
        },
        show: {
            type: Boolean,
            default: false
        },
        obj: {
            type: Object,
            default: {
                province: '北京市',
                city: '东城区'
            }
        },
        cityData: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            value: '',
            resultShow: this.show,
            province:{
                name:'',
                id:''
            },
            maskFlag:false,
            city:{
                name:'',
                id:''
            },
            area:{
                name:'',
                id:''
            },
            flag:0,
            provinces: [
                {
                    flex: 1,
                    values: this._getProvince(),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    className: 'right'
                }
            ],
            citys: [
                {
                    flex: 1,
                    values: this._getCity(this.obj.province),
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    className: 'slot2'
                }
            ],
            areas: [
                {
                    flex: 1,
                    values: this._getArea(this.obj.province, this.obj.city),
                    className: 'slot1',
                    textAlign: 'center'
                }
            ]
        }
    },
    watch: {
        show(val) {
            this.resultShow = val;
            mask.className = 'ep-mask';
            document.body.appendChild(mask);
            if (!val) {
                document.body.removeChild(mask);
            }
        },
        resultShow(val) {
            return val;
        }
    },
    computed: {
        result() {
            return {
                name: this.province.name + this.city.name + this.area.name,
                id: this.province.id + ',' + this.city.id + ',' + this.area.id
            }
        }
    },
    mounted() {
        this.province = {
            name: this.cityData[0] && this.cityData[0].name || '',
            id: this.cityData[0] && this.cityData[0].id || ''
        }
        this.city = {
            name: this.cityData[1] && this.cityData[1].name || '',
            id: this.cityData[1] && this.cityData[1].id || ''
        }
        this.area = {
            name: this.cityData[2] && this.cityData[2].name || '',
            id: this.cityData[2] && this.cityData[2].id || ''
        }
    },
    methods: {
        onValueChange(val) {
            this.value = val.values && val.values[0] || '';
        },
        cancel() {
            this.$emit('show', this.resultShow);
        },
        confirm() {
            this.$emit('change', this.result);
            this.$emit('show', this.resultShow);
        },
        onProvinceChange(picker, values) {
            if (this.flag === 0){
                return
            }
            let provinceIndex = picker.getSlotValue(0);
            this.province = provinceIndex;
            let city = this._getCity(provinceIndex.name);
            this.citys[0].values = city;
            this.city = city[0];
        },
        onCityChange(picker, values) {
            if (this.flag === 0){
                return
            }
            let cityIndex = picker.getSlotValue(0);
            this.city = cityIndex;
            let provinceIndex = this.province;
            let area = this._getArea(provinceIndex.name,cityIndex.name);
            this.areas[0].values = area;
            this.area = area[0];
        },
        onAreaChange(picker, values) {
            if (this.flag === 0){
                this.flag = 1
                return
            }
            let areaIndex = picker.getSlotValue(0);
            this.area = areaIndex;
        },
        //得到省份数据
        _getProvince(name) {
            let province = [];
            let intName = this.cityData[0] && this.cityData[0].name || '';
            let intCode = this.cityData[0] && this.cityData[0].id || '';
            province = intName && intCode ? [{id:intCode,name:intName}] : []
            this.data.forEach(function(item,index){
                if(intName != item.name){
                    let obj = {};
                    obj.id = item.code;
                    obj.name = item.name;
                    province.push(obj);
                }
                return
            });
            return province;
        },
        //根据省份得到城市数据
        _getCity(province){
            let city=[];
            this.data.forEach((item,index)=>{
                if(item.name == province){
                    item.city.forEach((item,index)=>{
                        let obj = {};
                        obj.id = item.code;
                        obj.name = item.name;
                        city.push(obj);
                        return
                    });
                }
            });
            return city
        },
        //根据城市和省份得到区域数据
        _getArea(province,city){
            let area = [];
            this.data.forEach((item,index)=> {
                if (item.name == province) {
                    item.city.forEach((item,index)=>{
                        if(item.name == city){
                            item.district && item.district.forEach((item)=>{
                                let obj = {};
                                obj.id = item.code;
                                obj.name = item.name;
                                area.push(obj);
                                return
                            });
                        }
                    });
                }
            });
            if (area.length==0){ //如果没有区域数据则第三个picker显示的内容
                area.push({
                    name: ' ',
                    id: '000000'
                });
            }
            return area;
        }
    }
}
</script>

<style lang="less" scoped>
.ep-picker {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(100%);
    -webkit-transition: -webkit-transform .3s ease-out;
    overflow: hidden;
    z-index: 100;
    .ep-title {
        .display-flex;
        .align-items;
        height: .4rem;
        padding: 0 .20rem;
        span {
            .flex;
            font-size: .15rem;
        }
        .ep-cancel {
            color: #0485e0;
            text-align: left;
        }
        .ep-confirm {
            color: #0485e0;
            text-align: right;
        }
    }
    .ep-linkage {
        background: #fafafa;
        .ep-pickerWrapper {
            float: left;
            width:33.3%;
        }
    }
}
</style>
